import { computed, defineComponent, ref } from 'vue';
import Fas from './Fas.vue';
import Disable from './Disable.vue';
import Drag from './Drag.vue';
import DragOnly from './DragOnly.vue';
import DragSnap from './DragSnap.vue';
import FloatingPoint from './FloatingPoint.vue';
import InnerMinMax from './InnerMinMax.vue';
import Label from './Label.vue';
import LabelAlways from './LabelAlways.vue';
import LabelLong from './LabelLong.vue';
import LabelValue from './LabelValue.vue';
import Lazy from './Lazy.vue';
import List from './List.vue';
import MarkerLabelSlots from './MarkerLabelSlots.vue';
import MarkerLabels from './MarkerLabels.vue';
import Markers from './Markers.vue';
import NativeForm from './NativeForm.vue';
import NoSelection from './NoSelection.vue';
import Null from './Null.vue';
import RangeColoring from './RangeColoring.vue';
import RangeSizes from './RangeSizes.vue';
import Readonly from './Readonly.vue';
import Reverse from './Reverse.vue';
import Snap from './Snap.vue';
import Standard from './Standard.vue';
import Step from './Step.vue';
import TrackImages from './TrackImages.vue';
import Vertical from './Vertical.vue';

export default defineComponent({
  name: 'App',
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});

    return () => {
      return (
        <div class='block'>
          <div class='block-'>
            <h5 class='title'>低代码属性测试</h5>
            <Fas />
          </div>
          <div class='block-'>
            <h5 class='title'>Disable</h5>
            <Disable />
          </div>
          <div class='block-'>
            <h5 class='title'>Drag</h5>
            <Drag />
          </div>
          <div class='block-'>
            <h5 class='title'>DragOnly</h5>
            <DragOnly />
          </div>
          <div class='block-'>
            <h5 class='title'>DragSnap</h5>
            <DragSnap />
          </div>
          <div class='block-'>
            <h5 class='title'>FloatingPoint</h5>
            <FloatingPoint />
          </div>
          <div class='block-'>
            <h5 class='title'>InnerMinMax</h5>
            <InnerMinMax />
          </div>
          <div class='block-'>
            <h5 class='title'>Label</h5>
            <Label />
          </div>
          <div class='block-'>
            <h5 class='title'>LabelAlways</h5>
            <LabelAlways />
          </div>
          <div class='block-'>
            <h5 class='title'>LabelLong</h5>
            <LabelLong />
          </div>
          <div class='block-'>
            <h5 class='title'>LabelValue</h5>
            <LabelValue />
          </div>
          <div class='block-'>
            <h5 class='title'>Lazy</h5>
            <Lazy />
          </div>
          <div class='block-'>
            <h5 class='title'>List</h5>
            <List />
          </div>
          <div class='block-'>
            <h5 class='title'>MarkerLabelSlots</h5>
            <MarkerLabelSlots />
          </div>
          <div class='block-'>
            <h5 class='title'>MarkerLabels</h5>
            <MarkerLabels />
          </div>
          <div class='block-'>
            <h5 class='title'>Markers</h5>
            <Markers />
          </div>
          <div class='block-'>
            <h5 class='title'>NativeForm</h5>
            <NativeForm />
          </div>
          <div class='block-'>
            <h5 class='title'>NoSelection</h5>
            <NoSelection />
          </div>
          <div class='block-'>
            <h5 class='title'>Null</h5>
            <Null />
          </div>
          <div class='block-'>
            <h5 class='title'>RangeColoring</h5>
            <RangeColoring />
          </div>
          <div class='block-'>
            <h5 class='title'>RangeSizes</h5>
            <RangeSizes />
          </div>
          <div class='block-'>
            <h5 class='title'>Readonly</h5>
            <Readonly />
          </div>
          <div class='block-'>
            <h5 class='title'>Reverse</h5>
            <Reverse />
          </div>
          <div class='block-'>
            <h5 class='title'>Snap</h5>
            <Snap />
          </div>
          <div class='block-'>
            <h5 class='title'>Standard</h5>
            <Standard />
          </div>
          <div class='block-'>
            <h5 class='title'>Step</h5>
            <Step />
          </div>
          <div class='block-'>
            <h5 class='title'>TrackImages</h5>
            <TrackImages />
          </div>
          <div class='block-'>
            <h5 class='title'>Vertical</h5>
            <Vertical />
          </div>
        </div>
      );
    };
  },
});
